<template>
    <div id="allAssess">
        <div class="allbtn">
            <ul class="btnUl">
                <li><span @click="change(1)" :class="flag == 1 ? 'active': 'clear' ">全部({{listNum.allNum}})</span></li>
                <li><span @click="change(2)" :class="flag == 2 ? 'active': 'clear'">好评({{listNum.goodNum}})</span></li>
                <li><span @click="change(3)" :class="flag == 3 ? 'active': 'clear'">中评({{listNum.normalNum}})</span></li>
                <li><span @click="change(4)" :class="flag == 4 ? 'active': 'clear'">差评({{listNum.badNum}})</span></li>
                <li><span @click="change(5)" :class="flag == 5 ? 'active': 'clear'">有图({{listNum.imgNum}})</span></li>
                <li><span @click="change(6)" :class="flag == 6 ? 'active': 'clear'">追加({{listNum.addNum}})</span></li>
            </ul>
        </div>
        <div v-for="x in list" style="margin-bottom: .2rem">
            <div class="talks">
                <ul class="user">
                    <li class="one"><img :src="x.firstRemark.headImg"><span>{{x.firstRemark.name}}</span></li>
                    <li class="two">{{x.firstRemark.time}}</li>
                </ul>
                <p class="text">{{x.firstRemark.msg}}</p>
                <div style="margin-left: .24rem;overflow: hidden;">
                    <div class="my-gallery" :data-pswp-uid="y" v-for="y in x.firstRemark.imgs">
                        <figure>
                            <img :src="y" @click="photoSwiperInit(x.firstRemark.imgs)">
                        </figure>
                    </div>
                </div>
                <p class="norms">{{x.firstRemark.spec}}</P>
            </div>
            <div class="useAdd" v-for="m in x.addRemark" v-if="m.timeStr">
                <p class="times">{{m.timeStr}}</p>
                <p class="twice">{{m.value}}</p>
                <div style="margin-left: .24rem;">
                    <div class="my-gallery" :data-pswp-uid="g" v-for="g in m.imgs">
                        <figure>
                                <img :src="g" @click="photoSwiperInit(m.imgs)">
                        </figure>
                    </div>
                </div>
            </div>
        </div>
        <!-- Root element of PhotoSwipe. Must have class pswp. -->
        <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

            <!-- Background of PhotoSwipe.
                 It's a separate element as animating opacity is faster than rgba(). -->
            <div class="pswp__bg"></div>

            <!-- Slides wrapper with overflow:hidden. -->
            <div class="pswp__scroll-wrap">

                <!-- Container that holds slides.
                    PhotoSwipe keeps only 3 of them in the DOM to save memory.
                    Don't modify these 3 pswp__item elements, data is added later on. -->
                <div class="pswp__container">
                    <div class="pswp__item"></div>
                    <div class="pswp__item"></div>
                    <div class="pswp__item"></div>
                </div>

                <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
                <div class="pswp__ui pswp__ui--hidden">

                    <div class="pswp__top-bar">

                        <!--  Controls are self-explanatory. Order can be changed. -->

                        <div class="pswp__counter"></div>

                        <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                        <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                        <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
                        <!-- element will get class pswp__preloader--active when preloader is running -->
                        <div class="pswp__preloader">
                            <div class="pswp__preloader__icn">
                                <div class="pswp__preloader__cut">
                                    <div class="pswp__preloader__donut"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                        <div class="pswp__share-tooltip"></div>
                    </div>

                    <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
                    </button>

                    <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
                    </button>

                    <div class="pswp__caption">
                        <div class="pswp__caption__center"></div>
                    </div>

                </div>

            </div>

        </div>
    </div>
</template>

<script>
    import config from "../config/config.js";
    import share from "../share/share.js";
    export default{
        data(){
            return{
                flag:1,
                list:[],
                listNum:{}
            }
        },
        methods:{
            change(index){
                this.flag = index;
                console.log(this.flag);
                this.GetRemarkList(this.flag)
            },
            GetRemarkList(type){
                var value=JSON.stringify({"page":1,"type":type,"spu_id":this.$route.params.pro_id,"token":localStorage.getItem('token')}),
                    key=demo(value);
                axios.post('/Home/Remark/GetRemarkList',{
                        value:value,
                        key:key
                },config)
                    .then(function(response) {
                       if(response.data.code==200){
                           this.list=response.data.data.data;
                           this.listNum=response.data.data.listNum;
                           share({});
                       }

                    }.bind(this))
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            photoSwiperInit(imgs){
                var openPhotoSwipe = function() {
                    var pswpElement = document.querySelectorAll('.pswp')[0];
                    // build items array
                    var items=[];
                    for(var l in imgs){
                        items.push({"src":imgs[l],"w":964,"h":1024})
                    }
                    // define options (if needed)
                    var options = {
                        // history & focus options are disabled on CodePen
                        history: false,
                        focus: false,

                        showAnimationDuration: 0,
                        hideAnimationDuration: 0

                    };

                    var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
                    gallery.init();
                };
                openPhotoSwipe();
            }
        },
        activated(){
            this.GetRemarkList(this.flag);
        }
    }
</script>

<style>
    
</style>